<template>
  <view class="card mb24">
    <view class="card-header flex flex-between mb32">
      <view class="font28" style="color: #333333;font-weight: 600">{{ title }}</view>
      <view style="color: #333333;font-weight: 500">合计费用：¥{{ objItem.refundBudgetTotlalMoney || objItem.budgetTotlalMoney || 0 }}</view>
    </view>
    <view class="card-container flex flex-between mb32">
      <view class="flex flex-column">
        <view>¥{{ objItem.refundManagerFee || objItem.managerFee }}</view>
        <view>管理费</view>
      </view>
      <view class="flex flex-column">
        <view>¥{{ objItem.refundTaxesFee || objItem.taxesFee }}</view>
        <view>税金费</view>
      </view>
      <view class="flex flex-column">
        <view>¥{{ objItem.refundCustomComprehensiveFee || objItem.customComprehensiveFee}}</view>
        <view>综合项金额</view>
      </view>
      <view class="flex flex-column">
        <view>¥{{ objItem.refundOtherFee || objItem.otherFee }}</view>
        <view>其他费用</view>
      </view>
    </view>
    <view class="card-text-container flex flex-between" style="margin-top: 20rpx" v-for="item in objItem.itemList" :key="item">
      <wd-img :width="62" :height="62"
              :src="item.mainPicUrl"></wd-img>
      <view class="card-container-details">
        <view class="font24 mb20" style="color: #333333;font-weight: 600">{{item.productName}}</view>
        <view class="flex flex-between mb28">
          <view>品牌：{{ item.brandName }}</view>
          <view>型号：{{ item.modeCode }}</view>
          <view>单位：{{ item.productUnit }}</view>
        </view>
        <view class="flex flex-between">
          <view class="font24" v-show="item.num>0">×{{item.num}}</view>
          <view class="flex">
            <view style="color: #333333">合计：</view>
            <text class="font28 sum-money">￥{{item.projectTotalMoney}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  objItem: {
    type: Object,
    default: () => {},
  },
});
</script>


<style scoped lang="scss">
.card {
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 32rpx;
  font-size: 20rpx;
  color: #86909C;

  &-header {
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #E6EAF3;
  }

  &-container {
    &-details {
      width: calc(100% - 144rpx);

      .sum-money {
        color: #FF4000;
      }
    }
  }

  &-text-container {
    padding: 40rpx 26rpx;
    background: #F2F4F8;
  }
}
</style>